<#assign basePath=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="${basePath}/js/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${basePath}/js/jquery1.8.3.min.js"></script>
    <script src="${basePath}/js/layer/layer.js"></script>
    <script src="${basePath}/js/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="${basePath}/js/shiro.demo.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
        <#--<h3>用户列表</h3>-->
        <#--<hr>-->
            <form style="margin-top: 1.5em" method="post" action="${basePath}/role/roleList" id="formId"
                  class="form-inline">
                <div clss="well">
                    <div class="form-group">
                        <input type="text" class="form-control" style="width: 300px;" value="${role.name?default('')}"
                               name="name" id="name" placeholder="输入角色类型 / 角色名称">
                    </div>
                    <span class=""> <#--pull-right -->
                        <button type="submit" class="btn btn-primary">查询</button>
                        <a class="btn btn-success" onclick="$('#addrole').modal();">增加角色</a>
                        <button type="button" id="deleteAll" class="btn  btn-danger">删除</button>
                    </span>
                </div>

                <hr>
                <table class="table table-bordered">
                    <tr>
                        <th><input type="checkbox" id="checkAll"/></th>
                        <th>角色名称</th>
                        <th>角色类型</th>
                        <th>操作</th>
                    </tr>


                    <#if page?exists && page.result?size gt 0 >
                        <#list page.result as it>
                        <tr>
                            <td><input value="${it.id}" check='box' type="checkbox" /></td>
                            <td>${it.name?default('-')}</td>
                            <td>${it.type?default('-')}</td>

                            <td>
                                <#if it.type != '888888'>
                                        <i class="glyphicon glyphicon-remove"></i><a href="javascript:deleteById([${it.id}]);">删除</a>
                                <#else>
                                    -
                                </#if>
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </table>
                <#if page?exists>
                <div class="pagination pull-right">
                    ${page.pageHtml}
                </div>
                </#if>
            </form>
        </div>
    </div>


<#--添加弹框-->
    <div class="modal fade" id="addrole" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addroleLabel">添加角色</h4>
                </div>
                <div class="modal-body">
                    <form id="boxRoleForm">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">角色名称:</label>
                            <input type="text" class="form-control" name="roleName" id="roleName" placeholder="请输入角色名称"/>
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">角色类型:</label>
                            <input type="text" class="form-control" id="type" name="type"  placeholder="请输入角色类型  [字母 + 数字] 6位">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="addRole();" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    so.init(function () {
        //初始化全选。
        so.checkBoxInit('#checkAll', '[check=box]');
        //全选
        so.id('deleteAll').on('click', function () {
            var checkeds = $('[check=box]:checked');
            if (!checkeds.length) {
                return layer.msg('请选择要删除的选项。', so.default), !0;
            }
            var array = [];
            checkeds.each(function () {
                array.push(this.value);
            });
            return deleteById(array);
        });
    });

    //根据ID数组，删除
    function deleteById(ids) {
        var index = layer.confirm("确定这" + ids.length + "个用户？", function () {
            var load = layer.load();
            $.post('${basePath}/role/deleteRoleById', {ids: ids.join(',')}, function (result) {
                layer.close(load);
                if (result && result.status != 200) {
                    return layer.msg(result.message, so.default), !0;
                } else {
                    layer.msg('删除成功');
                    setTimeout(function () {
                        $('#formId').submit();
                    }, 1000);
                }
            }, 'json');
            layer.close(index);
        });
    }

    <#--添加角色-->
    function addRole(){
        var name = $('#roleName').val(), type = $('#type').val();
        if($.trim(name) == ''){
            return layer.msg('角色名称不能为空。',so.default),!1;
        }
        if(!/^[a-z0-9A-Z]{6}$/.test(type)){
            return layer.msg('角色类型为6数字字母。',so.default),!1;
        }
    <#--loding-->
        var load = layer.load();
        $.post('${basePath}/role/addRole',{name:name,type:type},function(result){
            layer.close(load);
            if(result && result.status != 200){
                return layer.msg(result.message,so.default),!1;
            }
            layer.msg('添加成功。');
            setTimeout(function(){
                $('#formId').submit();
            },1000);
        },'json');
    }
</script>
</html>